<template>
  <div id="app">
    <!-- <p>{{tableData[1].stat}}</p>
    <p>{{tableData[1].billdate}}</p> 
    <div v-for="(s,index) in ds" :key="index">
      {{ds[index]}}
    </div>
    <gs-button size="small" type="primary">asdasd</gs-button>
    <gs-button size="small" type="primary" light>淡色</gs-button>
    <gs-button size="big" type="success"  @click="btnClick">生效</gs-button>
    <gs-button size="big" type="danger" disabled @click="btnClick"><i class="fa fa-trash-o fa-lg"></i> 删除</gs-button>
    <gs-button size="big" type="dark" >黑色</gs-button>
    <gs-button size="big" type="round" circle></gs-button>
    <gs-button size="mini" type="warning" circle><i class="iconfont iconsearch"></i></gs-button>
    <gs-button size="big" type="warning" light @click="selectStr2 = '004'">
    <i class="iconfont iconsearch"></i>主要按钮</gs-button>
    <gs-button >0</gs-button>
    <gs-input type="textarea" v-model="val" :long ="10"></gs-input>

    <gs-input type="inputButton" style="padding:15px" v-model="val" @keyup.enter.native="btnClick" gsStyle="warning" icon="iconfont iconsearch"  @searchClick="btnClick"></gs-input>

    <gs-input type="number" v-model="val" :long ="15" gsStyle="dark" select placeholder="请输入数字"></gs-input>
    {{dateStr}}
    {{selectStr2}}
    <gs-select style="width:350px;margin:10px" :options="options" gsStyle="info" v-model="selectStr2" trends="gscenter" ></gs-select>

    <gs-date style="width:300px;margin-left:10px"  gsStyle="primary" v-model="dateStr" trends="gsopacity"></gs-date>

		<p v-for="(i,ii) in selectStr" :key="ii">{{i}}</p>
    <gs-select  :options="options" gsStyle="warning" v-model="selectStr" placeholder="请输入数字" trends="drop"></gs-select>

    <gsTable v-if="false" :tableHead="tableHead" :tableData="tableData" :height="'410px'" summary gsStyle="warning" />asd -->
		<div style="display:flex;flex-direction: row;justify-content:space-between;align-items:center;height:100px;border-bottom: 1px solid #dcdfe6;margin:0 50px;">
			<div style="font-size:60px;margin:10px;color: #3298dc;cursor: pointer;" @click="vspClick">Vsp-ui</div>
			<div>
				<gs-input type="inputButton" style="padding:15px" v-model="val" @keyup.enter.native="btnClick" gsStyle="info" icon="iconfont iconsearch"  @searchClick="btnClick"></gs-input>
			</div>
		</div>
    <div style="width:100%;display:flex;flex-direction: row;">
      <div style="width:20%;height:70vh;display:flex;flex-direction: column;font-size:22px;align-items:center;margin-top:100px;
			border-right: 1px solid #dcdfe6;justify-content:flex-start">
        <router-link to="/vbutton" style="color: #3298dc">Button 按钮</router-link>
        <router-link to="/vselect" style="color: #3298dc">Select 选择</router-link>
        <router-link to="/vinput" style="color: #3298dc">Input 输入框</router-link>
        <router-link to="/vdate" style="color: #3298dc">Date 日期</router-link>
        <router-link to="/vtable" style="color: #3298dc">Table 表格</router-link>
        <router-link to="/vbadge" style="color: #3298dc">badge 消息按钮</router-link>
      </div>
      <div style="width:75%;margin:50px;">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import gsTable from "./components/table/table";
import gsButton from "./components/button/button";
import gsBadge from "./components/badge/badge";
import gsInput from "./components/input/input";
import gsDate from "./components/date/date";
import gsSelect from "./components/select/select";
export default {
  name: "App",
  components: {
    gsTable,
    gsBadge,
    gsButton,
    gsInput,
    gsDate,
    gsSelect,
  },
  mounted(){
    this.$router.push({'path': '/vindex', 'vindex': 'vindex'})
  },
  methods: {
    vspClick(){
      this.$router.push({'path': '/vindex', 'vindex': 'vindex'})
    },
    btnClick() {
      console.log(arguments);
    },
    click() {
      // this.tableData.push(JSON.parse())
      this.ds.push(1);
      // console.log(this.$refs.a)
      // console.log(this.$refs.b)
    },
    setBodyClass(i) {
      if (i % 2 == 0) {
        return "warning-row2";
      } else {
        return "warning-rows2";
      }
    },
  },
  data() {
    return {
      val: "",
      dateStr: "2020-03-01",
      a: "",
      selectStr2: "",
      selectStr: ["0014"],
      //["0014"]
      options: [
        {
          value: "0014",
          entId: "ent_000000000043",
          storeNo: "626",
          storeName: "测试",
          name: "测试测试",
          storeAddress: "",
          seqNo: 30,
          shopUrl: "",
          stat: "1",
          storeFullNa: "测试",
        },
        {
          value: "009",
          entId: "ent_000000000011",
          storeNo: "999",
          storeName: "老城根购物中心",
          name: "老城根购物中心",
          storeAddress: "老城根购物中心",
          seqNo: 11,
          shopUrl: null,
          stat: "1",
          storeFullNa: "老城根购物中心",
        },
        {
          value: "0013",
          entId: "ent_000000000043",
          storeNo: "626",
          storeName: "史迪仔",
          name: "史迪仔公馆",
          storeAddress: "万寿路",
          seqNo: 10,
          shopUrl: "",
          stat: "1",
          storeFullNa: "史迪仔",
        },
        {
          value: "711",
          entId: "ent_000000000011",
          storeNo: "711",
          storeName: "SangTo_shop_mall",
          name: "SangTo_shop_mall",
          storeAddress: "科技五路",
          seqNo: 8,
          shopUrl: "123456789",
          stat: "1",
          storeFullNa: "SangTo_shop_mall",
        },
        {
          value: "101",
          entId: "ent_000000000011",
          storeNo: "101",
          storeName: "国芳百货银川店",
          name: "宁夏国芳百货购物广场有限公司",
          storeAddress: "宁夏省银川市",
          seqNo: 7,
          shopUrl: null,
          stat: "1",
          storeFullNa: "国芳百货银川店",
        },
        {
          value: "102",
          entId: "ent_000000000011",
          storeNo: "102",
          storeName: "国芳百货西宁店",
          name: "甘肃国芳工贸（集团）股份有限公司西宁分公司",
          storeAddress: "青海省西宁市",
          seqNo: 6,
          shopUrl: "http://114.116.41.170:35000/sale-front-2.0",
          stat: "1",
          storeFullNa: "国芳百货西宁店",
        },
        {
          value: "006",
          entId: "ent_000000000011",
          storeNo: "006",
          storeName: "国芳百货张掖店",
          name: "张掖市国芳百货购物广场有限责任公司",
          storeAddress: "甘肃省张掖市",
          seqNo: 5,
          shopUrl: null,
          stat: "1",
          storeFullNa: "国芳百货张掖店",
        },
        {
          value: "005",
          entId: "ent_000000000011",
          storeNo: "005",
          storeName: "国芳百货白银店",
          name: "兰州国芳百货购物广场有限责任公司白银世贸中心",
          storeAddress: "甘肃省白银市",
          seqNo: 4,
          shopUrl: "http://198.43.1.46:35000/sale-front",
          stat: "1",
          storeFullNa: "国芳百货白银店",
        },
        {
          value: "004",
          entId: "ent_000000000011",
          storeNo: "004",
          storeName: "兰州国芳百货南关店",
          name: "兰州国芳百货购物广场有限责任公司南关分公司",
          storeAddress: "中国兰州",
          seqNo: 3,
          shopUrl: "http://198.31.4.1:35000/sale-front",
          stat: "1",
          storeFullNa: "兰州国芳百货南关店",
        },
        {
          value: "0017",
          entId: "ent_000000000045",
          storeNo: "1002",
          storeName: "测试门店2",
          name: "",
          storeAddress: "",
          seqNo: 2,
          shopUrl: "",
          stat: "1",
          storeFullNa: "测试门店2",
        },
        {
          value: "003",
          entId: "ent_000000000011",
          storeNo: "003",
          storeName: "兰州国芳百货西固店",
          name: "兰州国芳百货购物广场有限责任公司西固分公司",
          storeAddress: "中国兰州",
          seqNo: 2,
          shopUrl: "http://198.31.3.1:31000/sale-front",
          stat: "1",
          storeFullNa: "兰州国芳百货西固店",
        },
        {
          value: "0016",
          entId: "ent_000000000045",
          storeNo: "1001",
          storeName: "测试门店1",
          name: "asd",
          storeAddress: "",
          seqNo: 1,
          shopUrl: "",
          stat: "1",
          storeFullNa: "测试门店1",
        },
        {
          value: "611",
          entId: "ent_000000000011",
          storeNo: "611",
          storeName: "国芳百货总店",
          name: "兰州国芳百货购物广场有限责任公司",
          storeAddress: "中国兰州皋兰路东方红广场东侧",
          seqNo: 1,
          shopUrl: "http://114.116.46.192:35000/sale-front",
          stat: "1",
          storeFullNa: "国芳百货总店",
        },
        {
          value: "888",
          entId: "ent_000000000011",
          storeNo: "888",
          storeName: "虹盛-假日熊猫购物公园演示版",
          name: "虹盛-假日熊猫购物公园演示版",
          storeAddress: "虹盛-假日熊猫购物公园演示版",
          seqNo: 1,
          shopUrl: null,
          stat: "1",
          storeFullNa: "虹盛-假日熊猫购物公园演示版",
        },
      ],
      ds: [],
      className: "xe",
      tableHead: [
        {
          name: "项目",
          value: "xm",
          template:
            "<input v-gsFocus class='input td-div' v-model.trim='item.xm'></input>",
        },
        {
          name: "供应商",
          value: "parid",
          width: "220px",
          type: "input",
          format: "inputButton",
          icon: "iconfont iconsearch",
        },
        {
          name: "状态",
          value: "stat",
          width: "150px",
          type: "input",
          format: "text",
        },
        {
          name: "价格",
          value: "price",
          align: "right",
          summary: true,
          type: "input",
          format: "number",
        },
        {
          name: "制单人",
          value: "opt",
          type: "select",
          options: [
            { name: "张三", value: "001" },
            { name: "李四", value: "002" },
            { name: "韭菜", value: "003" },
          ],
          disabled: (index) => {
            if (index == 1) return true;
          },
        },
        { name: "制单日期", value: "billdate", type: "date" },
        { name: "商品编号", value: "gdno" },
        { name: "商品名称", value: "gdname" },
        {
          name: "删除",
          value: "button",
          type: "button",
          circle: true,
          size: "mini",
          btnType: "warning",
          icon: "iconfont iconsearch",
          disabled: (index) => {
            if (index == 1) return true;
          },
        },
        { name: "规格", value: "standard" },

        { name: "dd", value: "dd" },
        { name: "ee", value: "ee" },
        { name: "zzzz", value: "zzzz" },
        { name: "xxxx", value: "xxxx" },
      ],
      tableData: [
        {
          xm: "中文",
          parid: "阿萨德",
          opt: "张三",
          stat: "生效",
          price: 1,
          billdate: "2020-10-02",
          gdno: "000001",
          gdname: "拉面",
          standard: "10*0.3g",
          ss: "ss",
          dd: "dd",
          ee: "ee",
          zzzz: "asdasdasda",
          xxxx: "xxxx",
          cccc: "cccc",
          vvvv: "vvvv",
          bbbb: "bbbb",
          nnnn: "nnnn",
        },
        {
          xm: "英文",
          parid: "三宅一生",
          opt: "002",
          stat: "生效",
          price: 1,
          billdate: "",
          gdno: "000001",
          gdname: "臊子面",
          standard: "10*0.3g",
          ss: "ss",
          dd: "dd",
          ee: "ee",
          zzzz: "asdasdasda",
          xxxx: "xxxx",
          cccc: "cccc",
          vvvv: "vvvv",
          bbbb: "bbbb",
          nnnn: "nnnn",
        },
        {
          xm: "德文",
          parid: "阿萨德333",
          opt: "003",
          stat: "生效",
          price: 1,
          billdate: "2020-19-02",
          gdno: "000001",
          gdname: "油泼面",
          standard: "10*0.3g",
          ss: "ss",
          dd: "dd",
          ee: "ee",
          zzzz: "asdasdasda",
          xxxx: "xxxx",
          cccc: "cccc",
          vvvv: "vvvv",
          bbbb: "bbbb",
          nnnn: "nnnn",
        },
      ],
      tableHead2: [
        {
          name: "项目",
          value: "xm",
          template:
            "<input v-gsFocus class='input td-div' v-model.trim='item.xm'></input>",
        },
        { name: "供应商", value: "parid" },
        {
          name: "状态",
          value: "stat",
          width: "150px",
          type: "input",
          format: "text",
        },
        {
          name: "价格",
          value: "price",
          align: "right",
          summary: true,
          type: "input",
          format: "number",
        },
        { name: "制单人", value: "opt", type: "select" },
        { name: "制单日期", value: "billdate", type: "date" },
        { name: "商品编号", value: "gdno" },
        { name: "商品名称", value: "gdname" },
        { name: "删除", value: "button", type: "button" },
        { name: "规格", value: "standard" },
      ],
      tableData2: [
        {
          xm: "中文",
          parid: "阿萨德",
          opt: "张三",
          stat: "生效",
          price: 1,
          billdate: "2020-19-02",
          gdno: "000001",
          gdname: "拉面",
          standard: "10*0.3g",
          ss: "ss",
          dd: "dd",
          ee: "ee",
          zzzz: "asdasdasda",
          xxxx: "xxxx",
          cccc: "cccc",
          vvvv: "vvvv",
          bbbb: "bbbb",
          nnnn: "nnnn",
        },
        {
          xm: "英文",
          parid: "三宅一生",
          opt: "张三",
          stat: "生效",
          price: 1,
          billdate: "2020-19-02",
          gdno: "000001",
          gdname: "臊子面",
          standard: "10*0.3g",
          ss: "ss",
          dd: "dd",
          ee: "ee",
          zzzz: "asdasdasda",
          xxxx: "xxxx",
          cccc: "cccc",
          vvvv: "vvvv",
          bbbb: "bbbb",
          nnnn: "nnnn",
        },
        {
          xm: "德文",
          parid: "阿萨德333",
          opt: "张三",
          stat: "生效",
          price: 1,
          billdate: "2020-19-02",
          gdno: "000001",
          gdname: "油泼面",
          standard: "10*0.3g",
          ss: "ss",
          dd: "dd",
          ee: "ee",
        },
      ],
    };
  },
};
// <style lang="scss" scoped src="./components/style/index.scss"></style>
</script>
<style lang="scss" src="./components/style/index.scss"></style>
<style lang="scss" src="./view/code.scss"></style>



